import React, { useEffect, useState } from 'react';
import { Form, Row, Col, Input } from 'antd';
import { connect } from 'umi';
import Difference from '@/pages/WorkFlow/components/FormControls/components/Difference';
import FormItem from './PostFormItem';
import styles from './postForm.less';
import useGradeList from '../../hooks/useGradeList';
import usePositionTypeList from '../../hooks/usePositionTypeList';
import GradeSelector from '../GradeSelector';

const OFFSET = 0;

const PostBasicInfo = ({ singleStyle, doubleStyle, disabled, dataSource, form }) => {
    const { getFieldDecorator } = form;
    const { tips } = dataSource;
    const [, gradeList] = useGradeList();
    const [, positionTypeList] = usePositionTypeList({});
    const [rowGutter, setRowGutter] = useState(24);
    const [colSpan, setColSpan] = useState(rowGutter / 2);
    const [oldRankValue, seOldRankValue] = useState();

    useEffect(() => {
        const { firstPositionCode, secondPositionCode, rankCode } = dataSource;
        if (firstPositionCode && secondPositionCode && rankCode && gradeList.length > 0) {
            const targetItem = gradeList.find(item => item.rankCode === rankCode);
            if (targetItem?.rankCode) {
                form.setFieldsValue({
                    positionValue: `VV.${firstPositionCode}.${secondPositionCode.substring(3, 6)}.${
                        targetItem?.rankValue
                    }`
                });
            }
        }
    }, [dataSource, gradeList]);

    useEffect(() => {
        if (tips?.rankCode && gradeList.length > 0) {
            const targetItem = gradeList.find(item => item.rankCode === tips?.rankCode);
            if (targetItem) {
                seOldRankValue(targetItem.rankValue);
            }
        }
    }, [tips?.rankCode, gradeList]);

    React.useEffect(() => {
        if (!dataSource?.firstPositionCode) {
            setRowGutter(19);
            setColSpan(19);
        } else {
            setRowGutter(24);
            setColSpan(24 / 2);
        }
    }, [dataSource?.firstPositionCode]);

    return (
        <>
            <div className={styles.formBlockTitle}>基本信息</div>
            <Row gutter={rowGutter} type="flex" justify="space-between">
                <Col span={colSpan} offset={OFFSET}>
                    <FormItem
                        {...doubleStyle}
                        tips={tips}
                        required
                        disabled={disabled}
                        form={form}
                        initialFormInfo={dataSource}
                        label="职位类别"
                        positionTypeList={positionTypeList}
                        prop={['firstPositionCode', 'secondPositionCode']}
                    />
                </Col>
                <Col span={colSpan} offset={OFFSET}>
                    <Form.Item required label="职位名称" {...doubleStyle}>
                        <Difference tip={tips?.positionName}>
                            {getFieldDecorator('positionName', {
                                initialValue: dataSource.positionName,
                                rules: [
                                    {
                                        required: true,
                                        message: '职位名称不能为空'
                                    },
                                    {
                                        min: 2,
                                        max: 50,
                                        message: '请输入2~50个字符'
                                    }
                                ]
                            })(<Input disabled tip={tips?.positionName} />)}
                        </Difference>
                    </Form.Item>
                </Col>
                <Col span={colSpan} offset={OFFSET}>
                    <Form.Item label="职级" required {...doubleStyle}>
                        <Difference tip={oldRankValue}>
                            {getFieldDecorator('rankCode', {
                                initialValue: dataSource.rankCode || undefined,
                                rules: [
                                    {
                                        required: true,
                                        message: '职级不能为空'
                                    }
                                ]
                            })(<GradeSelector disabled={disabled} />)}
                        </Difference>
                    </Form.Item>
                </Col>
                <Col span={colSpan} offset={OFFSET}>
                    <Form.Item label="职位代码" required {...doubleStyle}>
                        <Difference tip={tips?.positionValue}>
                            {getFieldDecorator('positionValue', {
                                initialValue: dataSource.positionValue,
                                rules: [
                                    {
                                        required: true,
                                        message: '职位代码不能为空'
                                    }
                                ]
                            })(<Input disabled />)}
                        </Difference>
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={rowGutter}>
                <Col span={rowGutter}>
                    <Form.Item label="职位要求" required {...singleStyle}>
                        <Difference tip={tips?.positionDescription}>
                            {getFieldDecorator('positionDescription', {
                                initialValue: dataSource.positionDescription,
                                rules: [
                                    {
                                        required: true,
                                        message: '职位要求不能为空'
                                    },
                                    {
                                        max: 500,
                                        message: '字符不能超过500个'
                                    }
                                ]
                            })(
                                <Input.TextArea
                                    style={{ height: 240 }}
                                    disabled={disabled}
                                    placeholder="请输入"
                                    rows={4}
                                />
                            )}
                        </Difference>
                    </Form.Item>
                </Col>
            </Row>
        </>
    );
};

export default connect(({ dictionary }) => ({
    dictionary
}))(PostBasicInfo);
